<template>
  <div class="dashboard-editor-container">
    <panel-group :homeTopInfo="homeTopInfo" />
    <div>
      <el-form :inline="true" :model="chartQuery" class="demo-form-inline">
        <el-form-item label="选择">
          <el-select
          v-model="chartQuery.time"
          style="width: 100%"
          class="filter-item"
          @change="handleFilter1"
        >
          <el-option
            v-for="item in sortOptions1"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        </el-form-item>

        <el-form-item  v-if="userType != 'qudao' && chartQuery.time == '24h'" label="日期选择">
           <el-date-picker
            v-model="chartQuery.filters2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="filter-item pickertime"
            format="yyyy-MM-dd"
            value-format="timestamp"
            :picker-options="pickerOptions"
            @change="handleFilter"
          />
        </el-form-item>

         <el-form-item v-if="userType == 'all'" label="代理">
           <el-select
              v-model="chartQuery.proxy"
              style="width: 100%"
              filterable
              class="filter-item"
              @change="changeProxy"
            >
              <el-option key label="所有代理" value />
              <el-option
                v-for="value in dailiArr"
                :key="value"
                :label="value"
                :value="value"
              />
            </el-select>
        </el-form-item>

         <el-form-item v-if="userType == 'all' || userType == 'daili'" label="渠道">
           <el-select
            v-model="chartQuery.channel"
            style="width: 100%"
            filterable
            class="filter-item"
            @change="changeChannel"
          >
            <el-option key label="所有渠道" value />
            <el-option
              v-for="value in qudaoArr"
              :key="value"
              :label="value"
              :value="value"
            />
          </el-select>
        </el-form-item>

         <el-form-item v-if="userType == 'all'" label="包">
           <el-select
            v-model="chartQuery.package_name"
            style="width: 100%"
            class="filter-item"
            filterable
            @change="getChartData"
          >
            <el-option
              v-for="item in optionPackageName"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>

         <el-form-item  v-if="userType == 'all'" label="厂商">
           <el-select
            v-model="chartQuery.brand"
            style="width: 100%"
            class="filter-item"
            @change="getChartData"
          >
            <el-option
              v-for="item in optionBrandName"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getChartData();realDataInfo()">刷新</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row style="background: #fff; margin-bottom: 32px">
      <div class="sum" v-if="userType == 'all' || qd_List.indexOf(username) > -1" v-html="this.text"></div>
      <line-chart
        :chart-data="lineChartData"
        class="chart-wrapper"
        :height="height"
      />
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./components/PanelGroup";
import LineChart from "./components/LineChart";
import {
  realDataInfo,
  getChartData,
  getAdvChartData,
  getProxyNameList,
  getChannelNameList,
} from "@/api/admin/admin";
import {pkgs, qd_List} from '@/utils/index'
export default {
  name: "DashboardAdmin",
  components: {
    PanelGroup,
    LineChart,
  },
  data() {
    return {
      userType: this.$store.state.user.type,
      username: this.$store.state.user.name.username,
      homeTopInfo: {
        all_expend: 0.0,
        day_expend: 0.0,
        qudao: 0,
        ex: 0,
        pv: 0,
        uv: 0,
      },
      dailiData: "",
      qudaoData: "",
      dailiArr: [],
      qudaoArr: [],
      lineChartData: {
        date: [15, 16, 3, 161, 134, 105, 160],
        pv: [100, 120, 161, 134, 105, 160, 165],
        uv: [120, 82, 91, 154, 162, 140, 145],
        ex: "",
        z_pv: '',
        z_uv: "",
        z_ex: ""
      },
      listQuery: {
        last: 24,
        qudao: "",
        type: "",
        isreal: 0,
      },
      sortOptions1: [
        { label: "自选时间", key: "24h" },
        { label: "最近30天", key: "30d" },
      ],
      optionPackageName: pkgs,
      optionBrandName:[
         { label: "全部厂商", key: "" },
         { label: "oppo", key: "oppo" },
         { label: "vivo", key: "vivo" },
         { label: "小米", key: "xiaomi" },
         { label: "华为", key: "huawei" },
      ],
      chartQuery: {
        proxy: "",
        channel: "",
        filters: "",
        filters2: "",
        package_name: "",
        brand: '',
        time: '24h'
      },
      height: "500px",
      pickerOptions: {
        disabledDate(time) {

          return time.getTime() > Date.now();
        },
      },
      text: '',
      qd_List: qd_List
    };
  },
  mounted: function () {
    const doc = document;
    const h = doc.documentElement.clientHeight || doc.body.clientHeight;
    const navbarHeight = doc.querySelectorAll(".navbar")[0].offsetHeight;
    const swHeight = doc.querySelectorAll(".sw-panel-group")[0].offsetHeight;
    const minusHeight = h - navbarHeight - swHeight - 260;
    this.height = minusHeight + "px";
    //获取顶部数据
    this.realDataInfo();
    //获取图表数据
    this.getChartData();
    //获取代理列表
    this.getProxyNameList();
    //获取渠道列表
    this.getChannelNameList();
    // 广告图表数据
    // if (this.userType == 'all'){
    //    this.getChartData2()
    // }
  },
  methods: {
    realDataInfo() {
      let self = this;
      realDataInfo().then((r) => {
        self.homeTopInfo = r.DATA;
      });
    },
    //切换代理
    changeProxy() {
      this.chartQuery.channel = "";
      this.getChartData();
    },
    //切换渠道
    changeChannel() {
      this.chartQuery.proxy = "";

      this.getChartData();
    },
    //获取图表数据
    getChartData() {
      let self = this;
      getChartData(this.chartQuery).then((r) => {
        if(this.chartQuery.time == '30d'){
          r.DATA.date = r.DATA.date ? r.DATA.date.reverse() : [];
          r.DATA.uv = r.DATA.uv ? r.DATA.uv.reverse() : [];
          r.DATA.pv = r.DATA.pv ? r.DATA.pv.reverse() : [];
          r.DATA.ex = r.DATA.ex ? r.DATA.ex.reverse() : [];
          r.DATA.z_uv = r.DATA.z_uv ? r.DATA.z_uv.reverse() : [];
          r.DATA.z_ex = r.DATA.z_ex ? r.DATA.z_ex.reverse() : [];
        } else {
          r.DATA.date = r.DATA.date ? r.DATA.date : [];
          r.DATA.uv = r.DATA.uv ? r.DATA.uv: [];
          r.DATA.pv = r.DATA.pv ? r.DATA.pv: [];
          r.DATA.ex = r.DATA.ex ? r.DATA.ex: [];
          r.DATA.z_uv = r.DATA.z_uv ? r.DATA.z_uv: [];
          r.DATA.z_ex = r.DATA.z_ex ? r.DATA.z_ex: [];
          r.DATA.z_pv = r.DATA.z_pv ? r.DATA.z_pv: [];
        }
        
        var c_uv = 0,c_ex=0,c_pv=0
        for(let i = 0; i < r.DATA.uv.length; i++) {
          c_uv += r.DATA.uv[i]
          c_ex += r.DATA.ex[i]
          c_pv += r.DATA.pv[i]
        }
        
        this.text =r.DATA.uv_date + '合计 pv : '+c_pv + '  uv : ' + c_uv 
        if (this.userType !== "qudao") {
          this.text += ' d :' + c_ex + '   uv%: ' + ((c_ex / c_uv) * 100).toFixed(2) + '%';
        }

        var c_uv = 0,c_ex=0,c_pv=0
        for(let i = 0; i < r.DATA.z_uv.length; i++) {
          c_uv += r.DATA.z_uv[i]
          c_ex += r.DATA.z_ex[i]
          c_pv += r.DATA.z_pv[i]
        }
        this.text += '<br>'+ r.DATA.z_uv_date + '合计 pv : '+c_pv + '  uv : ' + c_uv 
        if (this.userType !== "qudao") {
          this.text += ' d :' + c_ex + '   uv%: ' + ((c_ex / c_uv) * 100).toFixed(2) + '%';
        }

        self.lineChartData = r.DATA;
      });
    },
    //获取广告图表数据
    getChartData2() {
      let self = this;
      // alert(1)
      let params = {
        redirect_url: "adv.ydwhgs.com/v1/adv",
      };

      // Object.keys(this.advQuery).forEach(element => {
      //   if (this.advQuery[element]){
      //     params[element] = this.advQuery[element]
      //   }
      // });
      console.log(params);
      getAdvChartData(params).then((r) => {});
    },
    //获取代理列表
    getProxyNameList() {
      getProxyNameList().then((r) => {
        this.dailiArr = r.DATA;
      });
    },
    //获取渠道列表
    getChannelNameList() {
      getChannelNameList().then((r) => {
        this.qudaoArr = r.DATA;
      });
    },
    handleFilter() {

      if (this.chartQuery.filters2) {
        this.chartQuery.time_start = this.chartQuery.filters2[0] / 1000;
        this.chartQuery.time_end = this.chartQuery.filters2[1] / 1000;
      } else {
        this.chartQuery.time_start = "";
        this.chartQuery.time_end = "";
      }
      console.log(this.chartQuery.time_start, this.chartQuery.time_end)
      if (this.chartQuery.time_start && this.chartQuery.time_end){
        this.chartQuery.filters =this.chartQuery.time_start + ','+this.chartQuery.time_end
      }else{
        this.chartQuery.filters = ''
      }
      
      this.getChartData();
    },
    handleFilter1(){
        if (this.chartQuery.time == '30d'){
          this.chartQuery.filters = this.chartQuery.time
          this.getChartData();
        } else {
          this.handleFilter()
        }
    }
    
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-row .el-col-lg-2 {
  padding-right: 20px;
}
.dashboard-editor-container {
  padding: 24px;
  background-color: #f1f5f7;
  position: relative;

  .github-corner {
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    border-radius: 10px;
    padding: 10px 0px;
    // border: 1px #ddd solid;
    // box-shadow: 4px 4px 20px #DEDDE5;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    border-radius: 10px;
    padding: 8px;
  }
}
.sum{
  text-align: center;
  padding: 10px;
}
</style>
